<template>
	<view class="search-index">
		<view class="search">
			<view class="search-icon">
				<image src="../../static/images/back.png" mode="" @click="pageBack"></image>
			</view>
			<view class="search-input">
				<input type="text" :value="inputValue" placeholder="智能积木 越野四驱车" @input="changeValue" />
				<image src="../../static/images/search.png" mode=""></image>
			</view>
			<view class="search-scan" @click="search">
				搜索
			</view>
		</view>
		<view class="search-tips">
			热门搜索
		</view>
		<view class="search-images">
			<image src="../../static/logo.png" ></image>
		</view>
		<view class="search-content">
			<view class="search-btn">
				领券中心
			</view>
			<view class="search-btn2">
				Remi K20
			</view>
			<view class="search-btn">
				领券中心
			</view>
			<view class="search-btn2">
				Remi K20
			</view>
			<view class="search-btn">
				领券中心
			</view>
			<view class="search-btn2">
				Remi K20
			</view>
		
		</view>
		<view class="search-tips">
			常用分类
		</view>
		<view class="sort-list">
			<view class="sort-use">
				耳机
			</view>
			<view class="sort-use">
				耳机
			</view>
			<view class="sort-use">
				耳机
			</view>
			<view class="sort-use">
				耳机
			</view>
			<view class="sort-use">
				耳机
			</view>
			<view class="sort-use">
				耳机
			</view>
			<view class="sort-use">
				耳机
			</view>
			
			<view class="sort-use">
				耳机
			</view>
			<view class="sort-use">
				耳机
			</view>
		
		</view>
			
		<!-- 这里搜索记录功能 -->
		<view class="search-tip2">
		
			<view class="left">
					搜索记录
			</view>
			<view class="right" @click="clearHistory">
					清除搜索记录
			</view>
			
		</view>
		<view class="search-show" v-for="(item,index) in searchList">
			<!-- 专门记录搜索了什么内容 -->
			<text>{{item}}</text>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 记录搜索的值
				inputValue:'',
				//历史记录查询
				searchList:[]
			}
		},
		methods: {
			search(e){
			// 检测输入框里面的值
				if(this.inputValue.trim()==''){
					uni.showToast({
					    title: '输入不能为空',
					    duration: 1000,
							icon:"error"
					});
				}else{
					// 将数据添加到历史记录的数组
					this.searchList.push(this.inputValue)
					this.inputValue=''
				}
			},
			clearHistory(){
				// 清除历史记录
				this.searchList=[]
			},
			changeValue(e){
				console.log(e)
				this.inputValue=e.detail.value
				console.log(this.inputValue)
			},
			pageBack(){
				uni.navigateBack({
				    delta: 1
				});
			},
		}
	}
</script>

<style>
	#search-index {
		width: 100%;
		height: 100%;
	}

	.search {
		width: 100%;
		height: 66rpx;
		/* border: 1rpx solid #333333; */
		/* 使用弹性盒子 */
		display: flex;
		/* 两边留白 */
		justify-content: space-around;
		align-items: center;
		margin-top: 66rpx;


	}

	/* 调整图片的大小 */
	.search-icon image{
		width: 60rpx;
		height: 60rpx;

	}
.search-scan{
	text-align: center;
	color: #CCCCCC;
	line-height: 66rpx;
}
	,
	/* 将两个图标盒子设置一样大小 */
	.search-icon,
	.search-scan {
		width: 66rpx;
		height: 66rpx;

	}

	/* 调整搜索框并且将图标进行调整 */
	.search-input {
		width: 500rpx;
		height: 100%;
		border: none;
		background-color: #F7F7F7;
		color: #cccccc;
		/* 设置相对定位 */
		position: relative;
		padding-left: 60rpx;
		display: flex;
		align-items: center;

	}

	/* 调整图标 */
	.search-input image {
		width: 45rpx;
		height: 45rpx;
		/* 使用定位将图标放进去 */
		position: absolute;
		left: 10rpx;


	}
	
	/* 搜索下面样式 */
	.search-tips{
		font-weight: bolder;
		margin: 30rpx 20rpx;
		
	}
	.search-images{
		width: 100%;
		height: 200rpx;
		margin: 20rpx 0rpx;
	}
	.search-images image{
		width: 100%;
		height: 100%;
	}
	.search-content,.sort-list{
		padding: 0px 20rpx;
		width: 80%;
		height: 300rpx;
		display: flex;
		justify-content: flex-start;
		align-items: space-between;
		/* margin-left: 20rpx; */
		flex-wrap:wrap;
		box-sizing: border-box;
	}
	.search-btn{
		width: auto;
		height: 100rpx;
		background-color: #FEBDC5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 40rpx;
	}
	.search-btn2 {
		width: auto;
		height: 100rpx;
		background-color: #E7F5F6;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 40rpx;
	}
	.sort-use{
		width: auto;
		padding: 10rpx 15rpx;
		height: 60rpx;
		background-color: #E7F5F6;
		display: flex;
		align-items: center;
		justify-content: center;
			margin-right: 40rpx;
	}
	
	.search-tip2{
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		
	}
	.search-tip2 .left{
		font-weight: bolder;
	}
	.search-tip2 .right{
		color: #00aaff;
	}
	
	.search-show{
		width: 100%;
		margin: 10rpx 20rpx;
	}
</style>
